/* eslint-disable jsx-a11y/anchor-is-valid */
import InfiniteScroll from "@/components/infiniteScroll";
import MessageDrawer from "@/components/messageDrawer/index";
import { SearchOutlined } from "@ant-design/icons";
import { Button } from "antd";
import React, { useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";

import Search from "antd/es/input/Search";
const Index: React.FC = () => {
	let key = 1;
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState<any[]>([]);
	const [open, setOpen] = useState<boolean>(false);
	const [messageInfo, setMessageInfo] = useState<{
		userID: string | number;
		articleID: string | number;
	}>({ userID: "", articleID: "" });
	const loadMoreData = () => {
		console.log("loadMoreData", loading);
		if (loading) {
			return;
		}
		setLoading(true);
		setTimeout(() => {
			const list = [];
			for (let i = 0; i < 8; i++) {
				key += 1;
				list.push({
					id: key,
					href: `/article/`,
					title: `标题 ${key}`,
					avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
					description: "描述",
					content: "内容",
					star: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					like: {
						status: true,
						count: Math.floor(Math.random() * 40),
					},
					message: {
						count: Math.floor(Math.random() * 30),
					},
				});
			}
			setData([...data, ...list]);
			setLoading(false);
			console.log(
				scrollRef.current?.scrollHeight,
				scrollRef.current?.clientHeight,
				document.body.clientHeight
			);
		}, 1000);
	};
	const scrollRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		loadMoreData();
	}, []);

	const handleClick = (id: string, str: string, value?: boolean) => {
		console.log(id, str, value);
		if (str === "messgae") {
			setMessageInfo({
				userID: id,
				articleID: "casf",
			});
			setOpen(true);
		} else {
			const list = data.map((item) => {
				if (item.id === id) {
					if (str === "star") {
						console.log(item[str], id, 999999);
					} else if (str === "like") {
						console.log(item[str], id, 888888888);
					}
					item[str].status = value;
					if (!value) {
						item[str].count--;
					} else {
						item[str].count++;
					}
				}
				return item;
			});
			setData(list);
		}
	};
	const onSearch = (e: string) => {
		console.log(e);
	};
	return (
		<div className={styles.root}>
			<div className="hearder_search">
				<div className="search">
					<Search
						allowClear
						placeholder="请输入搜索条件..."
						enterButton={
							<Button type="primary" icon={<SearchOutlined />}>
								搜索
							</Button>
						}
						size="large"
						onSearch={onSearch}
					/>
				</div>
				<div className="screen">2</div>
			</div>
			<InfiniteScroll
				data={data}
				loadMoreData={loadMoreData}
				loading={loading}
				handleClick={handleClick}
			/>
			<MessageDrawer
				info={{
					userID: "",
					articleID: "",
				}}
				open={open}
				onClose={() => setOpen(false)}
			/>
		</div>
	);
};

export default Index;
